import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useSelector, useDispatch } from 'dva';
import { CloseCircleOutlined } from '@ant-design/icons';
import { Tabs } from 'antd';
// 组件
import EchartCom from '@/components/EchartComponents';
// utils或工具库
import * as echarts from 'echarts';
import _ from 'lodash';
import * as api from '@/services';
import useStateRef from '@/hooks/useStateRef';
import { v4 as uuid4 } from 'uuid';
// styles
import styles from './index.less';

export default () => {
  const dispatch = useDispatch();
  const [options, setOptions] = useState(null);
  const { menuArr, tabsDataArr } = useSelector((state) => state.globalStore);
  const [chooseItem, setChooseItem] = useState(null);
  const [list, updateList, listRef] = useStateRef([]);
  const initOptions = () => {
    // prettier-ignore
    let dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
    // prettier-ignore
    let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
    let yMax = 500;
    let dataShadow = [];
    for (let i = 0; i < data.length; i++) {
      dataShadow.push(yMax);
    }
    let option = {
      title: {
        text: '特性示例：渐变色 阴影 点击缩放',
        subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom',
      },
      xAxis: {
        data: dataAxis,
        axisLabel: {
          inside: true,
          color: '#fff',
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        z: 10,
      },
      yAxis: {
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: '#999',
        },
      },
      dataZoom: [{ type: 'inside' }],
      series: [
        {
          type: 'bar',
          showBackground: true,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#83bff6' },
              { offset: 0.5, color: '#188df0' },
              { offset: 1, color: '#188df0' },
            ]),
          },
          emphasis: {
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#2378f7' },
                { offset: 0.7, color: '#2378f7' },
                { offset: 1, color: '#83bff6' },
              ]),
            },
          },
          data: data,
        },
      ],
    };
    setOptions(option);
  };

  const clickFun = (data) => {
    api.queryDatas().then((res) => {
      let params = {
        ...res.data,
        echartName: data.name,
        key: uuid4(),
      };
      let arr = [...listRef.current];
      arr.push({ ...params });
      arr = _.uniqBy(arr, 'echartName');
      dispatch({
        type: 'globalStore/UPDATE',
        payload: {
          tabsDataArr: [...arr],
        },
      });
    });
  };

  const remove = (targetKey) => {
    console.log('zyh===', targetKey);
    let newTabsArr = [...listRef.current];
    newTabsArr = newTabsArr.filter((i) => i.key != targetKey);
    dispatch({
      type: 'globalStore/UPDATE',
      payload: {
        tabsDataArr: [...newTabsArr],
      },
    });
  };

  useEffect(() => {
    initOptions();
  }, []);

  useEffect(() => {
    console.log('zyh===', tabsDataArr);
    updateList([...tabsDataArr]);
  }, [tabsDataArr]);

  return (
    <div className={styles.lbddbox}>
      <div className="echart-tabs-content">
        <Tabs
          className="echart-box"
          hideAdd
          onChange={(key) => {
            setChooseItem(tabsDataArr.filter((n) => n.key === key));
          }}
          activeKey={chooseItem?.key}
          type="editable-card"
          onEdit={(targetKey, action) => {
            if (action === 'add') {
            } else {
              remove(targetKey);
            }
          }}
        >
          <Tabs.TabPane tab="echart图" key="echart">
            <EchartCom
              chartClick={clickFun}
              option={options}
              style={{ width: '100%', height: '100%' }}
            />
          </Tabs.TabPane>
          {tabsDataArr.length &&
            tabsDataArr.map((i) => (
              <Tabs.TabPane tab={i.echartName} key={i.key}>
                {i.name + i.key}
              </Tabs.TabPane>
            ))}
        </Tabs>
      </div>
    </div>
  );
};
